import React, {useEffect, useState} from 'react';
import axios from 'axios';
// import jsonArticle from '../../axios/Article.json'
// import jsonArticleSuperClub from '../../axios/ArticleSuperClub.json'
// import jsonArticleBodyHomePage from '../../axios/ArticleBodyHomePage.json'

export default function Article({jsonUrl, flag}) {
    let jsonData = []
    // console.log('../axios/' + jsonUrl + '.json');
    // switch (jsonUrl) {
    //     case 'Article':
    //         jsonData = jsonArticle;
    //         break;
    //     case 'ArticleBodyHomePage':
    //         jsonData = jsonArticleBodyHomePage;
    //         break;
    //     case 'ArticleSuperClub':
    //         jsonData = jsonArticleSuperClub;
    //         break;
    //     default:
    //         jsonData = jsonArticle;
    //         break;
    // }
    const [data, setData] = useState(null);
    const [error, setError] = useState(null);
    useEffect(() => {
        axios.get('http://localhost:8091/article/list')
            .then((response) => {
                console.log(response.data)
                setData(response.data);
                setError(null);
            })
            .catch((error) => {
                setData(null);
                setError(error);
            });
    }, []); // 空的依赖数组意味着这个effect只会在组件挂载时运行
    if (error) {
        // 处理错误
        return <div>Error fetching data</div>;
    }
    if (!data) {
        // 数据还未加载，可以显示加载指示器
        return <div>Loading...</div>;
    }
    // 使用数据渲染组件
    return (
        <div className="list-group">
            <a className="list-group-item list-group-item-action" href='#'></a>{
            data.data.map((item) => {
                return <a href={`/articleContent/${item.id}`} className="list-group-item list-group-item-action">
                    <div>
                        <div>文章名称：{item.title}</div>
                        <div>
                            <span style={{float: "left"}}>
                                文章ID：{item.id}<br/>
                                作者ID：{item.articleUsernameId}
                            </span><br/>
                            <span style={{float: "right"}}>发布时间：{item.created.substring(0, 10)}</span>
                        </div>
                    </div>
                </a>
            })
        }
        </div>
    );
}
